
<section id="cEnd-create" class="ml-24 mr-24">
	<div class="fileButton"></div>
	<div class="picButton"></div>
	<h4 class="line-height-56 font-16 border-b" style="margin: 0px;">新建活动&福利</h4>
	<div class="mt-15 dy-flex">
		<div class="dy-fx-1 line-height-34"><span style="color:#fff;">*</span>类别:</div>
		<div class="dy-fx-8">
			<div class="select-ul" style="width:150px;">
				<span class="select-name br-4 box-i-shadow">请选择</span>
				<ul>
					<li v-for="item in typelist" @click="eventType(item)">{{item.dictName}}</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="mt-10 dy-flex">
		<div class="dy-fx-1 line-height-34"><span style="color:#fff;">*</span>标题:</div>
		<div class="dy-fx-8">
			<input type="text" class="form-control" style="width: 520px;" v-model="articleTitle" />
		</div>
	</div>
	<div class="dy-flex mt-10" v-if="flag">
		<div class="dy-fx-1 line-height-34">
			<span style="color:#fff;">*</span>头图:
		</div>
		<div class="dy-fx-8">
			<div class="picbox" v-if="listImg">
				<img :src="listImg" class="picture">
				<span class="resetup cursor" @click="picUp">重新上传</span>
			</div>
			<button type="button" class="btn s-btn-default" v-if="!listImg" @click="picUp">上传图片</button>
		</div>
	</div>
	<div class="dy-flex mt-10">
		<div class="dy-fx-1 line-height-34">
			<span style="color:#fff;">*</span>地区:
		</div>
		<div class="dy-fx-8 dy-flex">
			<div class="select-ul mr-10" style="width: 120px;">
				<span class="select-name br-4 box-i-shadow" ref="provinceSel">省</span>
				<ul>
					<li v-for="item in provinceList" @click="setProvince(item)">{{ item.name }}</li>
				</ul>
			</div>
			<div class="select-ul mr-10" style="width: 120px;">
				<span class="select-name br-4 box-i-shadow" ref="citySel">市</span>
				<ul>
					<li v-for="item in cityList" @click="setCity(item)">{{ item.name }}</li>
				</ul>
			</div>
			<div class="select-ul" style="width: 120px;">
				<span class="select-name br-4 box-i-shadow" ref="areaSel">区</span>
				<ul>
					<li v-for="item in areaList" @click="setArea(item)">{{ item.name }}</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="dy-flex mt-10">
		<div class="dy-fx-1 line-height-34">
			<span style="color:#fff;">*</span>详细地址：
		</div>
		<div class="dy-fx-8">
			<input type="text" class="form-control" v-model="data.address" style="width: 520px;">
		</div>
	</div>
	<div class="mt-10 dy-flex">
		<div class="dy-fx-1 line-height-34"><span style="color:#fff;">*</span>内容:</div>
		<div class="dy-fx-8">
			<div id="editor" style="width: 854px;"></div>
		</div>
	</div>
	<div class="mt-10 dy-flex">
		<div class="dy-fx-1 line-height-34"><span style="color:#fff;">*</span>上传附件:</div>
		<div class="dy-fx-8">
			<ul>
				<li v-for="(item, index) in files" class="relative">
					<a :href="item.url" :download="item.name" class="color-999 line-height-34">
						<span class="mr-5" :class="{'icon-file': item.type == 'file', 'icon-picture': item.type == 'pic'}"></span>
						{{item.name}}
					</a>
					<span class="icon-Gm-close absolute color-999 cursor font-12 line-height-34" style="right:0;top:0;" @click="delFile(index)"></span>
				</li>
			</ul>
			<button type="button" class="btn s-btn-default" @click="fileUp">上传文件</button>
		</div>
	</div>


	<div v-if="participateAt == 'Y'">
		<div class="mt-10 dy-flex">
			<div class="dy-fx-1 line-height-34"><span style="color:#fff;">*</span>参与时间:</div>
			<div class="dy-fx-8">
				<web-calendar v-model="dateTime.begin" tips="请选择日期" style="width: 120px;display: inline-block;vertical-align: middle;"></web-calendar>
				<span class="line-height-34 inline" style="vertical-align: middle;">-</span>
				<web-calendar v-model="dateTime.end" tips="请选择日期" style="width: 120px;display: inline-block;vertical-align: middle;"></web-calendar>
				<span class="js-set color-999" :class="{'js-q-active': dateTime.isDefalut}" @click="longTrem" style="margin-left: 28px;">长期</span>
			</div>
		</div>
		<div class="mt-10 dy-flex">
			<div class="dy-fx-1 line-height-34"><span style="color:#fff;">*</span>自定义参与:</div>
			<div class="dy-fx-8">
				<input type="text" class="form-control" placeholder="自定义按钮名称，默认“参与”（非必填）" style="width: 310px;" v-model="buttonName">
			</div>
		</div>

		<div class="color-primary mt-15 cursor" @click="delAllModule">
			<span class="icon-Gm-delete"></span>
			<span>删除提交模版</span>
		</div>
		<div class="border mt-5 br-4">
			<div class="dy-flex text-center line-height-40" style="background:rgba(240,242,255,1);height: 40px;color: #A5AAB7;">
				<div class="dy-fx-2">自定义名称</div>
				<div class="dy-fx-1">类型</div>
				<div class="dy-fx-2">取值范围</div>
				<div class="dy-fx-2">是否必填</div>
			</div>
			<div class="dy-flex text-center line-height-40 color-666 module-tows" @click="moudleIndex = index" :class="{'module-active': index == moudleIndex}"
			 style="height: 40px;" v-for="(item, index) in moduleLt">
				<div class="dy-fx-2">
					<span class="mr-5" v-if="!item.flag0">{{ item.name }}</span>
					<input type="text" class="form-control inline-block text-center" style="width: 60%;" v-model="item.name" v-if="item.flag0">
					<span class="icon-Gm-edit" v-if="!item.flag0" @click="queryName(index)"></span>
					<span class="icon-Gm-confirm ml-5" v-if="item.flag0" @click="queryName(index)"></span>
					<span class="icon-Gm-cancel ml-5" v-if="item.flag0" @click="queryName(index, 'cancel')"></span>
				</div>
				<div class="dy-fx-1">
					<div class="select-ul" style="width:100px;">
						<span class="select-name br-4 box-i-shadow cursor" style="text-indent: 0;">请选择</span>
						<ul>
							<li v-for="item in fieldLt" @click="typeSel(item, index)">{{item.dictName}}</li>
						</ul>
					</div>
				</div>
				<div class="dy-fx-2">
					<span class="mr-5" v-if="!item.flag1">{{ item.range }}</span>
					<input type="text" class="form-control inline-block text-center" :placeholder="item.placeholder" style="width: 60%;"
					 v-model="item.range" v-if="item.flag1">
					<span class="icon-Gm-edit" v-if="!item.flag1" @click="queryRange(index)"></span>
					<span class="icon-Gm-confirm ml-5" v-if="item.flag1" @click="queryRange(index)"></span>
					<span class="icon-Gm-cancel ml-5" v-if="item.flag1" @click="queryRange(index, 'cancel')"></span>
				</div>
				<div class="dy-fx-2">
					<div class="select-ul" style="width:100px;">
						<span class="select-name br-4 box-i-shadow cursor" style="text-indent: 0;">是</span>
						<ul>
							<li v-for="item in isValidateLt" @click="isValidateSel(item, index)">{{item.name}}</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="mt-15">
			<button type="button" class="btn s-btn-default mr-10" @click="addMoudle">添加一行</button>
			<button type="button" class="btn s-btn-default" @click="delOneModule">删除</button>
		</div>
	</div>

	<div class="border-t mt-15 pt-10 pb-10">
		<button class="n-btn-primary br-4 mr-10" @click="saveSubmit">保存</button>
		<button class="n-btn-outline br-4 mr-10" @click="previewInfo">预览</button>
	</div>
	<div class="loadprogress" v-if="progress">正在上传({{progress}})...</div>
</section>

<style media="screen">
	.loadprogress{
		position: fixed;
		z-index: 999999;
		left: 0;
		bottom: 0;
		height: 20px;
		width: 500px;
		font-size: 12px;
		text-indent: 3px;
		line-height: 20px;
	}
	.picbox {
		width: 110px;
		height: 110px;
		display: inline-block;
		position: relative;
	}

	.picture {
		width: 100%;
		height: 100%;
	}

	.resetup {
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		height: 28px;
		line-height: 28px;
		color: #fff;
		background: rgba(0, 0, 0, .5);
		text-align: center;
	}

	.hover-show {
		display: none;
	}

	.init-file-hover:hover .hover-show {
		display: block;
	}

	.hl-date-icon {}

	.module-tows:nth-child(2n+1) {
		background: rgba(249, 249, 249, 1);
	}

	.module-active {
		background: rgba(240, 240, 247, 1) !important;
	}
</style>

<script src="scripts/libs/wangEditor.min.js" charset="utf-8"></script>
<script src="modules/workbench/scripts/activity_welfare_create.js" charset="utf-8"></script>
